<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- jquery.jqplot -->
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="-1" />
    <!-- jquery.jqplot -->
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <link rel="stylesheet" type="text/css"
      href="../jquery.jqplot/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css"
      href="../jquery.jqplot/examples.min.css" />
    <link type="text/css" rel="stylesheet"
      href="../jquery.jqplot/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet"
      href="../jquery.jqplot/shThemejqPlot.min.css" />
    <script type="text/javascript"
      src="../js/jquery-1.9.1.min.js">
</script>
  <script type="text/javascript"
      src="../jquery.jqplot/jquery.jqplot.min.js">
</script>
    <!--  <script type="text/javascript"
      src="jquery.jqplot/jquery.jqplot.js">
</script>-->
    <script type="text/javascript" src="../jquery.jqplot/shCore.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/shBrushJScript.min.js">
</script>
    <script type="text/javascript" src="../jquery.jqplot/shBrushXml.min.js">
</script>
    <script type="text/javascript" src="../jquery.jqplot/jqplot.json2.min.js">
</script>
    <script type="text/javascript" src="../jquery.jqplot/example.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.logAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.canvasTextRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.canvasAxisLabelRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.canvasAxisTickRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.dateAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.categoryAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="../jquery.jqplot/jqplot.barRenderer.min.js">
</script>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../jquery.jqplot/excanvas.min.js"></script><![endif]-->

    <!--jquery.jqplot end -->
	<script type="text/javascript">
    var jsonurl = "oftenChartRun";
function test() {
  var ret = [];
  var ticks = [];
  $.ajax( {
    async : false,
    data:{index:2},
    url : jsonurl,
    cache : false,
    dataType : "json",
    success : function(data) {
    ret[0] = data;
  }
  });
  $.ajax( {
    // have to use synchronous here, else the function 
    // will return before the data is fetched
    async : false,
    cache : false,
    url : "getX",
    dataType : "json",
    success : function(data) {
      ticks = data;
    }
  });

  plot2.data = ret;
  plot2.axes.xaxis.ticks = ticks;
  plot2.options.axes = {
  //show: true,
    xaxis : {
      padMin : 0,
      numberTicks : 12,
      
      ticks : this.plot2.axes.xaxis.ticks,
      tickRenderer : $.jqplot.CanvasAxisTickRenderer,
      tickOptions : {
        formatString : "%#'dh",
        angle : 40
      },
        padMax : 1
    },
       yaxis : {
        tickOptions : {
          formatString : "%#.2f"
        }
      }

  };
  plot2.replot(plot2.options);
}
var plot2;
$(document).ready(function() {
  var ajaxDataRenderer = function(url, plot, options) {
    var ret = [];
    $.ajax( {
      async : false,
      url : jsonurl,
      data:{index:2},
      dataType : "json",
      cache : false,
      success : function(data) {
        ret[0] = data;
      }
    });
    return ret;
  };
  function getX() {
    var ret = null;
    $.ajax( {
      async : false,
      url : "getX",
      dataType : "json",
      success : function(data) {
        ret = data;
        //console.log(ret);
    }
    });
    //console.log(ret);
    return ret;
  }
  ;
  plot2 = $.jqplot('chartdiv', jsonurl, {
    //plot2 = $.jqplot('chartdiv', [ jsonurl, jsonurl2 ], {
    dataRenderer : ajaxDataRenderer,
    //axisDefaults: {  
        //show: true
        //},
    axes : {
      xaxis : {
        //min:"0",
        //max:"24",
        //show: true,
        padMin : 0,
        numberTicks : 12,
        ticks : getX(),
        tickRenderer : $.jqplot.CanvasAxisTickRenderer,
        tickOptions : {
          formatString : "%#'dh",
          angle : 40
        },
        padMax : 1
      },
       yaxis : {
        tickOptions : {
          formatString : "%#.2f"
        }
      }
    },
    dataRendererOptions : {
      unusedOptionalUrl : jsonurl
    }

  });
  //console.dir(plot2);
  setInterval("test()", 5000);
   //setInterval("getDate()", 5000);
});
</script>
  </head>

  <body>
    <div id="chartdiv" style="height: 370px; width: 780px;">
    </div>
  </body>
</html>
